<template>
  <div class="dialog">
    <span v-if="custFullName != ''" style="margin-right: 10px">{{custFullName}}
      <i class="icon-shanchu1" style="cursor: pointer" @click="removeCust" v-if="!disabled"></i>
    </span>
    <el-button @click="dialogVisible = true" type="primary" v-if="!disabled">选择客户</el-button>


    <el-dialog
      :visible.sync="dialogVisible"
      width="450px"
      style="font-size: 13px"
      center
      :append-to-body="true"
      :before-close="handleClose">
      <span slot="title" class="dialog-title">
        选择客户
      </span>
      <div>
        <span class="label">客户分组：</span>

        <el-cascader
          :options="custOptions"
          v-model="custGroup"
          :show-all-levels="false"
          change-on-select
          :props="groupProps"
          style="width:254px"
          @change="getId"></el-cascader>
      </div>
      <div style="margin: 10px 0">
        <span class="label">客户名称：</span>
        <el-input v-model="custName" style="width:254px;" @keyup.native.enter="searchCust">
          <i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="searchCust"></i>
        </el-input>
      </div>
      <div style="display: flex; align-items: end;margin: 10px 0">
        <span class="margin_item label">搜索结果：</span>
        <div class="custList">
          <el-radio v-model="custId"  v-for="(item,index) in searchData" :key="index" :label="item.id" v-if="searchData != undefined && searchData.length > 0 ">{{item.fullname}}</el-radio>
          <span v-else>
            暂无数据
          </span>
        </div>
      </div>

      <div style="display: flex; align-items: end">
        <span class="margin_item label">最近选择客户：</span>
        <div class="custList">
          <el-radio v-model="custId"  v-for="(item,index) in weekCustList" :key="index" :label="item.id" v-if="weekCustList != undefined && weekCustList.length > 0 ">{{item.fullname}}</el-radio>
          <span v-else>
            暂无数据
          </span>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="closeDialog">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {queryCustType, queryCust} from '@/api/customer'
  import {queryCustList, findCustByWeek} from '@/api/order'
    export default {
        name: "checkCust",
        props:['defaultId', 'disabled'],
        data() {
            return {
                dialogVisible:false, // 显示隐藏
                searchData: [], // 搜索客户
                checkoutData: [], // 最近选择客户
                custOptions: [], // 客户分组集合
                custGroup: [], // 选中的客户分组
                custName: '', // 客户名称
                custId: '', // 客户选中id
                custFullName: '', // 客户选中名称
                defaultName: '', // 默认名字
                weekCustList:[], // 最近七天选择客户
                groupProps:{
                    checkStrictly: true,
                    value: "id",
                    label: "text",
                    children: "children"
                }
            }
        },
        mounted() {
            queryCustType().then(res => {
                this.custOptions = res.data.data
            })
            document.body.addEventListener('click', () => {
              this.bus.$emit('closeMenu')
            })
            findCustByWeek().then(res => {
                if(res.data.success) {
                    console.log(res.data.data)
                    this.weekCustList = res.data.data
                }
            })

        },
        methods: {
            handleClose() {
                this.dialogVisible = false
                this.$nextTick(() => {
                    this.searchData = []
                    this.custName = ''
                    this.typeId = ''
                })
            },
            searchCust() { // 搜索客户
                queryCustList(this.typeId, this.custName).then(res => {
                  this.searchData = res.data.data
              })
            },
            getId(value) {
                this.typeId = value[value.length - 1]
                queryCustList(this.typeId , this.custName).then(res => {
                    this.searchData = res.data.data
                })
            },
            closeDialog() {
                this.dialogVisible = false
                this.$emit('setCust', this.custId)
            },
            removeCust() {
                this.custId = ''
                this.custFullName = ''
                this.searchData = []
                // 客户分组清空
                this.custGroup = []
                this.$emit('reomveCust')
            }
        },
        watch: {
            custId(value) {
                if(value) {
                    queryCust(value).then(res =>{
                        this.custFullName = res.data.data.fullname
                    })
                }
            },
            defaultId(value) {
                if(value) {
                    queryCust(value).then(res =>{
                        this.custFullName = res.data.data.fullname
                    })
                }
            }
        }
    }
</script>

<style lang="scss">
  .custList{
    .el-radio{
      display: block;
      margin: 5px;
    }
  }

</style>

<style scoped>
.dialog{
  font-size: 13px;
}
.margin_item{
    margin-bottom: 15px;
    display: block;
  }
  .custList{
    background-color: #DDDDDD;
    width: 254px;
    border-radius: 10px;
    padding:10px;
    box-sizing: border-box;
  }
  .label{
    display: inline-block;
    width: 100px;
  }
</style>
